<template>
    <div id="mapContainer" style="width: 100%;height:100%">

    </div>
    <!-- <div class="panel">
      <input id='keyword' type="text" value=''>
      <input id="search" type="button" class="btn" value="搜索"/>
    </div> -->
</template>
  
<script setup>
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted,onBeforeUnmount} from 'vue'
  
  import { useUserStore } from '@/pinia/modules/user'

  const userStore = useUserStore()

  const props = defineProps({
    center:{
        type:Object,
        default:{'lat':29.35,'lng':106.33}  // 默认重庆
    },
    zoom:{
        type:Number,
        default:11.5
    },
    showControl:{
        type:Boolean,
        default:true
    }
  })

  const emit = defineEmits(['draw_complete','loading_completed','on_click','editor_delete'])

  onMounted(()=>{
    initMap()
  })

  let markers = []

  let map = ''
  const initMap = ()=>{
    //定义地图中心点坐标
    let center = new TMap.LatLng(props.center.lat, props.center.lng)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new TMap.Map("mapContainer", {
        center: center,//设置地图中心点坐标
        zoom:props.zoom,   //设置地图缩放级别
        showControl:false,// 不显示控件
        baseMap:{
          type:'satellite'
        }
    });
    map.on("tilesloaded", function () {
        console.log("地图加载完成：") 
        emit('loading_completed',map)

        // 去除左下logo标志
        let oA = document.querySelector('.logo-text').parentNode
        oA.style.display = 'none'
        
        if(props.showControl){
          // 获取加减控件
          let control1 = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
          map.addControl(control1)
          control1.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT); // 设置位置为右下
          // 获取旋转控件
          //let control2 = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
          //map.addControl(control2)
          //control2.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT); // 设置位置为右下   

        }else{
          map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
          map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
        }
        
    })
    // 添加点击事件
    map.on( 'click',
        async function(event) {
            //alert('您点击的位置为:[' + event.latLng.getLng() +',' + event.latLng.getLat() + ']');
           const result = await latLng_convert_to_address(event.latLng.getLat(),event.latLng.getLng())
           emit('on_click',{...result,...result.address_component})
        }
    );

    //setMarker(31.320,110.345,'农场1','423.22亩')
    //setMarker(29.35,106.23,'农场2','158.68亩')

    //createRadiation()

    // createHeat()

    // createDot()

    // createArea()

    // drawMap()

    //修改地图中心点
    //map.setCenter(new TMap.LatLng(lat,lng));
  }

  onBeforeUnmount(()=>{
    console.log("销毁地图")
    map.destroy()
  })

  /**
 * 设置标签
 * @param {*} lat 纬度
 * @param {*} Lng 经度
 * @param {*} title 标题
 * @param {*} info 内容
 * @param {*} className 样式
 */
  let infowindows = []
  const setMarker = (lat,lng,title,info,className,callBack=()=>{},id)=>{
    //创建InfoWindow实例，并进行初始化
    const content= "<div id='"+id+"' class='"+className+"' onclick='("+callBack+")(this)'><h5>"+title+"</h5><p>"+info+"</p></div>"
    var infowindow=new TMap.InfoWindow({
      content:content,//`<div class='${className}' onclick="(()=>{alert(1)})()"><h5>${title}</h5><p>${info}</p></div>`, //信息窗口内容
      position:new TMap.LatLng(lat,lng),//显示信息窗口的坐标
      enableCustom:true, // 是否自定义样式
      map:map  
    });
    infowindows.push(infowindow)
    return infowindow
  }

  const setMarker2 = (lat,lng,content)=>{
    //创建InfoWindow实例，并进行初始化
    var infowindow=new TMap.InfoWindow({
      content, //信息窗口内容
      position:new TMap.LatLng(lat,lng),//显示信息窗口的坐标
      enableCustom:true, // 是否自定义样式
      map:map  
    });
    infowindows.push(infowindow)
    return infowindow
  }
  // 清除setMarker所标记
  const clearAllMarker = ()=>{
    infowindows.forEach(item =>{
      item.destroy()
    })
  }

  /**
 * 创建辐射图
 * @param {*} lat 纬度
 * @param {*} Lng 经度
 * @param {*} title 标题
 * @param {*} info 内容
 */
  const createRadiation = ()=>{

      //创建辐射圈
      var radiationCircle = new TMap.visualization.Radiation({
        styles: {
            style2: {
              fillColor: "rgba(248, 8, 8,0.9)", //辐射圈填充颜色
            },
          },
          processAnimation: {
            duration: 3000, //辐射圈半径从0到最大半径的时长，单位为ms
          },
      }).addTo(map);
      //设置辐射圈数据
      let radiationData = [
        {
          radius: 2000, // 杈愬皠鍦堝崐寰勶紝鍗曚綅涓虹背
          center: new TMap.LatLng(29.42, 106.40), // 杈愬皠鍦堜腑蹇冪偣缁忕含搴�
          styleId: "style2",
        },

        {
          radius: 2000, // 杈愬皠鍦堝崐寰勶紝鍗曚綅涓虹背
          center: new TMap.LatLng(29.40,106.28), // 杈愬皠鍦堜腑蹇冪偣缁忕含搴�
          styleId: "style2",
        },
      ];

      radiationCircle.setData(radiationData)
      
      
  }

/**
 * 创建热力图
 * @param {*} lat 纬度
 * @param {*} Lng 经度
 * @param {*} title 标题
 * @param {*} info 内容
 */
  const createHeat=()=>{
    //创建热力图
    var heat = new TMap.visualization.Heat({
        max: 120, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 100, // 峰值高度
        gradientColor: new TMap.GradientColor({
        stops: {
          0.6: "#000000",
          0.8: "#000000",
          0.9: "#000000",
          }
        }),
        radius: 30 // 最大辐射半径
    
    }).addTo(map);
    
    heat.setData([
      {
        "lng": 106.50,
        "lat": 29.42,
        "count": 100
      }, {
        "lng": 106.38,
        "lat": 29.40,
        "count": 100
      }
    ]);//设置数据
  }

   /**
 * 创建散点图
 * @param {*} lists 点数组 ：{ lat: 29.42, lng: 106.50, styleId: "redCircle" }
 * @param {*} radius 半径
 */
  const createDot = (lists,radius=20)=>{
    // 创建散点图
    var dot = new TMap.visualization.Dot({
        faceTo: 'screen', // 设置散点朝向
        styles: {
            redCircle: {  // 定义一个红色圆形样式
                type: 'circle',
                fillColor: 'rgba(3, 151, 52,0.5)',
                radius, //圆形半径
            }
        }
    }).addTo(map); // 通过addTo()添加到指定地图实例
    
    // 设置数据，若需要更新数据则再次调用setData方法即可
    dot.setData(lists);
    return dot
  }

   /**
 * 设置区域
 * @param {*} paths 经纬度即样式对象
 */
  const createArea = (paths)=>{
    if(!paths || paths.length<1) return
    // let paths = [{
    //     path:[
    //         29.318471894466573,106.31519920845165,
    //         29.263009896343743, 106.31908271188695,
    //         29.265550797081172,106.45306364060366,
    //         29.33793995463303, 106.44578206541132,
    //         29.325667046088295,106.35888863923242,
    //         29.325667046088295,106.35888863923242
    //     ],
    //     styleId:'styel1'
    // }];
    let area = new TMap.visualization.Area({
      styles: { //设置区域图样式
        styel1: {
          fillColor: `rgba(22,132,252,0.8)`, //设置区域填充颜色
          strokeColor: '#1684fc', //设置区域边线颜色
        },
        styel2: {
          fillColor: `rgba(72,178,122,0.8)`, //设置区域填充颜色
          strokeColor: '#48b27a', //设置区域边线颜色
        },
      },
    }).addTo(map);
    area.setData(paths)
    return area
  }
 

/**
 * 初始化鼠标选区
 * @param {*} paths 经纬度即样式对象
 */
  const drawMap = ()=>{
    let polygonObj = new TMap.MultiPolygon({
      map: map,
    });
    let editor = new TMap.tools.GeometryEditor({
      // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
      map: map, // 编辑器绑定的地图对象
      overlayList: [
        {
          overlay: polygonObj,
          id: 'polygon',
        },
      ],
      actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
      activeOverlayId: 'polygon',//'marker', // 激活图层
      snappable: true, // 开启吸附
    });
    // 监听绘制结束事件，获取绘制几何图形
    editor.on('draw_complete', (geometry) => {
          // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
          if (editor.getActiveOverlay().id === 'polygon') {
            // 获取矩形顶点坐标
            var id = geometry.id;
            var geo = polygonObj.geometries.filter(function (item) {
              return item.id === id;
            });
            const paths = geo[0].paths
            //console.log("区域面积：",TMap.geometry.computeArea(geo[0].paths)+"平方米")
            emit('draw_complete',{paths,area:TMap.geometry.computeArea(paths)})

            // 清除绘制的图形
            polygonObj.destroy()
            editor.destroy()

            initGeometryEditor(paths) // 设置该区域可编辑
            // setTimeout(()=>{
            //   editor.removeOverlay("polygon") // 此方法调用后无法再绘图了
            // },3000)
          } 
        });
  }

  /**
   * 普通标记
   * @param {*} lat 纬度
   * @param {*} Lng 经度
   * */
  const setMultiMarker = (lat,lng)=>{
    let marker = new TMap.MultiMarker({
        map: map,
        styles: {
          // 点标记样式
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        geometries: [
          // 点标记数据数组
          {
            // 标记位置(纬度，经度，高度)
            position: new TMap.LatLng(lat, lng),
            id: 'marker',
          },
        ],
      });
      markers.push(marker)
  }

  const removeAllMarker =()=>{
    for(let i=0;i<markers.length;i++){
      if (markers[i]) {
        markers[i].setMap(null);
      }
    }
    markers = []
  }

  /**
   * 设置中心点
   * @param {*} lat 纬度
   * @param {*} Lng 经度
   * */
  const setCenter = (lat, lng)=>{
    map.setCenter(new TMap.LatLng(lat, lng))
  }

  /**
   * 设置地图模式：
   * @param {*} str VectorBaseMap矢量底图（默认），SatelliteBaseMap卫星地图
  */
  const setBaseMap = (str)=>{
    map.setBaseMap({type:str})
  }

  const setZoom = (number)=>{
    map.setZoom(number)
  }
  

  /**
   * 经纬度转化为地址
   * @param {*} lat 纬度
   * @param {*} Lng 经度
   * */
  const latLng_convert_to_address = (lat, lng)=>{
    return new Promise((resolve,reject) =>{
      const geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
      const location = new TMap.LatLng(lat, lng);
     // map.setCenter(location)
      geocoder.getAddress({ location }) // 将给定的坐标位置转换为地址
      .then((result) => {
        resolve(result.result)
      });
    })
  }

  /**
   * 地址转换为经纬度（该方法可以根据城市名定位地图显示中心点）
   * @param {*} address 地址（注：地址中请包含城市名称，否则会影响解析效果）
   * @param {*} type 为1时，表示设置当前地址获得的经纬度为中心点
  */
  const address_convert_to_latLng = (address,type=1)=>{
    return new Promise((resolve,reject) =>{
      const geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 
      geocoder.getLocation({address}) // 将给定的坐标位置转换为地址
      .then((result) => {
        resolve(result.result)
        if(type==1){
          map.setCenter(result.result.location)
        }
      });
    })
  }

  /**
   * 初始化几何图形及编辑器
  */
 let editorObj=''
  const initGeometryEditor = (simplePath)=>{
    // var simplePath = [
		// 		new TMap.LatLng(40.04051164600918, 116.27488518619089),
		// 		new TMap.LatLng(40.040943635857445, 116.27804611629756),
		// 		new TMap.LatLng(40.03951759379146, 116.2783762087081),
		// 		new TMap.LatLng(40.03891287066983, 116.2752049655744)
		// ];
    let editor = new TMap.tools.GeometryEditor({
				map, // 编辑器绑定的地图对象
				overlayList: [ // 可编辑图层
					{
						overlay: new TMap.MultiPolygon({
							map,
							styles: {
								highlight: new TMap.PolygonStyle({
									color: 'rgba(255, 255, 0, 0.6)'
								})
							},
							geometries: [
								{
                  id: 'polygon1',
									paths: simplePath
								}
							]
						}),
						id: 'polygon',
						selectedStyleId: 'highlight'
					}
				],
				actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
				activeOverlayId: 'polygon', // 激活图层
				selectable: true, // 开启点选功能
				snappable: true // 开启吸附
			});
      editor.select(['polygon1']); // 选中属于激活状态的图层内的几何图形
      editor.on('adjust_complete', evtResult => {
          emit('draw_complete',{
            paths:evtResult.paths,
            area:TMap.geometry.computeArea(evtResult.paths)
          })
					console.log(evtResult);
			});
      // 监听删除
      editor.on("delete_complete", (evtResult) => {
        emit('editor_delete')
      });
      editorObj = editor
      return editor
  }

  const clearSelectEditor = ()=>{
    editorObj.select([])
  }



  // 导出方法，供父组件调用
  defineExpose({
    setMarker,
    createRadiation,
    createArea,
    createDot,
    createHeat,
    drawMap,
    setMultiMarker,
    setCenter,
    latLng_convert_to_address,
    address_convert_to_latLng,
    removeAllMarker,
    clearAllMarker,
    setMarker2,
    setBaseMap,
    setZoom,
    initGeometryEditor,
    clearSelectEditor
  }) 
  </script>
  
  <style lang="scss">
  .mapMarker,.mapMarker2{
    position: relative;
    background-color: #1684fc;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
    color: #fff;
    &::after{
      content: '';
      width: 10px;
      height: 10px;
      background-color: #1684fc;
      transform: rotate(45deg);
      position: absolute;
      bottom: -4px;
      left: 0px;
      right: 0px;
      margin: auto;
      box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 2px;
    }
    .conbox{
        text-align: left;
        margin: 0 -8px;
        padding:2px 14px;
        &+.conbox{
          border-top: 1px solid rgba(255, 255, 255,0.5);
        }
        p{
          text-align: left;
          font-size: 12px;
          line-height: 22px;
          max-width: 250px;
          padding: 0;
          margin: 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        } 
    }
  }
  .mapMarker2{
    background-color: #48b27a;
    color: #fff;
    &::after{
      background-color: #48b27a;
    }
  }
  .panel{
    display: flex;
    position: fixed;
    z-index: 2002;
    left: 400px;
    top:100px;
    #keyword{
      height: 30px;
      width: 200px;
      border-radius: 2px;
      padding: 0 10px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }
  }
</style>
